import './index.scss'

import { useState, lazy, Suspense } from 'react'
import { useMount, useEventEmitter } from 'ahooks'

import { AdminDiySet } from './Common'
import { GetIndexedDB } from '../../Utils/IndexedDB'

const HomeA02 = () => {
    const [Theme, setTheme] = useState()
    const [OpenStatus, setOpenStatus] = useState(false)

    useMount(async () => {
        const Theme = await GetIndexedDB('theme')
        setTheme(Theme.ThemeSet)
        setOpenStatus(Theme.MenuSet.inline)
    })

    const MenuEvent = useEventEmitter()
    const OpenEvent = useEventEmitter()

    if (Theme) {
        const { logo, rest, user, menu, page } = Theme
        const Logo = lazy(() => import(`../Logo/${logo}.jsx`))
        const Rest = lazy(() => import(`../Rest/${rest}.jsx`))
        const User = lazy(() => import(`../User/${user}.jsx`))
        const Menu = lazy(() => import(`../Menu/${menu}.jsx`))
        const Page = lazy(() => import(`../Page/${page}.jsx`))
        return (
            <Suspense>
                <div className='HomeA02'>
                    <div className='L'>
                        <Logo OpenStatus={OpenStatus} OpenEvent={OpenEvent} />
                        <Menu OpenStatus={OpenStatus} OpenEvent={OpenEvent} MenuEvent={MenuEvent} />
                    </div>
                    <div className='R'>
                        <div className='T'>
                            <Rest />
                            <User />
                        </div>
                        <Page MenuEvent={MenuEvent} OpenStatus={OpenStatus} OpenEvent={OpenEvent} />
                    </div>
                </div>
                <AdminDiySet MenuEvent={MenuEvent} />
            </Suspense>
        );
    }
};

export default HomeA02;